<template>
  <div>
    <!-- 头部 -->
    <p-head @addnum="getcaseNav"></p-head>
    <!-- 横通 -->
    <div class="tips">
      <img src="../../img/casetips.jpg" alt="" />
      <div class="tips_title">
        <h1>案例</h1>
        <h2>CASE</h2>
      </div>
    </div>
    <div class="case_content layout">
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <div class="c_list">
              <ul>
                <li class="case_card" v-for="item in caselist" :key="item.id">
                  <div class="cc_detail">
                    <div class="cc_detailpic" @click="toCasedetail(item.id)">
                      <img :src="item.thumb" alt="" />
                    </div>
                    <div class="cc_detailtitle">
                      <div @click="toCasedetail(item.id)">
                        <h3>{{ item.title }}</h3>
                        <p>中文 / {{ item.case_nav_name }}</p>
                      </div>
                      <template v-if="item.neturl">
                        <a :href="item.neturl" target="_blank">
                          <div class="iconfont yf-icon-lianjie"></div>
                        </a>
                      </template>
                      <template v-else>
                        <div
                          class="iconfont yf-icon-lianjie"
                          @click="noNetword()"
                        ></div>
                      </template>
                    </div>
                    <div class="cc_detailto">
                      <router-link
                        :to="{
                          path: '/casedetail',
                          query: { case_id: item['id'] },
                        }"
                      >
                        <span>Details</span></router-link
                      >
                      <span class="iconfont yf-icon-yanjing"
                        >&nbsp;&nbsp;{{ item.reading }}</span
                      >
                    </div>
                  </div>
                </li>
                <!--                <li class="case_card">-->
                <!--                  <div class="cc_detail">-->
                <!--                    <div class="cc_detailpic">-->
                <!--                      <img src="../../img/casepic2.jpg" alt="" />-->
                <!--                    </div>-->
                <!--                    <div class="cc_detailtitle">-->
                <!--                      <div>-->
                <!--                        <h3>武汉黄陂华美达广场酒店</h3>-->
                <!--                        <p>中文 / 响应式网站</p>-->
                <!--                      </div>-->
                <!--                      <div class="iconfont yf-icon-lianjie"></div>-->
                <!--                    </div>-->
                <!--                    <div class="cc_detailto">-->
                <!--                      <span>Details</span>-->
                <!--                      <span class="iconfont yf-icon-yanjing"-->
                <!--                        >&nbsp;&nbsp;111</span-->
                <!--                      >-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </li>-->
              </ul>
              <!-- 加载更多 -->
              <template v-if="page < allpage">
                <div class="lod" @click="domore(0)">加载更多</div>
              </template>
              <template v-if="caselist.length == 0">
                <el-empty description="暂无数据"></el-empty>
              </template>
            </div>
          </el-tab-pane>
          <template v-for="em in case_nav" ：key="em.id">
            <el-tab-pane :label="em.name" :name="em.name" :cnid="em.id">
              <div class="c_list">
                <ul>
                  <li class="case_card" v-for="item in caselist" :key="item.id">
                    <div class="cc_detail">
                      <div class="cc_detailpic">
                        <router-link
                          :to="{
                            path: '/casedetail',
                            query: { case_id: item['id'] },
                          }"
                        >
                          <img :src="item.thumb" alt="" />
                        </router-link>
                      </div>
                      <div class="cc_detailtitle">
                        <div>
                          <h3>{{ item.title }}</h3>
                          <p>中文 / {{ item.case_nav_name }}</p>
                        </div>
                        <template v-if="item.neturl">
                          <a :href="item.neturl" target="_blank">
                            <div class="iconfont yf-icon-lianjie"></div>
                          </a>
                        </template>
                        <template v-else>
                          <div
                            class="iconfont yf-icon-lianjie"
                            @click="noNetword()"
                          ></div>
                        </template>

                        <!--                        <div class="iconfont yf-icon-lianjie"></div>-->
                      </div>
                      <div class="cc_detailto">
                        <router-link
                          :to="{
                            path: '/casedetail',
                            query: { case_id: item['id'] },
                          }"
                        >
                          <span>Details</span></router-link
                        >
                        <span class="iconfont yf-icon-yanjing"
                          >&nbsp;&nbsp;{{ item.reading }}</span
                        >
                      </div>
                    </div>
                  </li>
                </ul>
                <template v-if="page < allpage">
                  <div class="lod" @click="domore(em.id)">加载更多</div>
                </template>
              </div>
              <template v-if="caselist.length == 0">
                <el-empty description="暂无数据"></el-empty>
              </template>
            </el-tab-pane>
          </template>
        </el-tabs>
      </template>
    </div>

    <!-- 底部 -->
    <p-foot></p-foot>
  </div>
</template>
<script>
import {} from "../../http/api";
import { get } from "@/http/request";
import { errorAlert } from "@/utils/alert";
export default {
  components: {},
  props: [],
  data() {
    return {
      activeName: "first",
      banner: [],
      caselist: [],
      case_nav: [],
      total: "",
      page: 1,
      allpage: "",
      limit: 6,
    };
  },
  methods: {
    noNetword() {
      errorAlert("改项目不是网站,请先关注在查看内容!");
    },
    handleClick(tab, event) {
      this.page = 1;
      // 重置数据
      this.caselist = [];
      /**判断是否有值请求数据**/
      let smcate_id = tab.$attrs.cnid;
      get("/api/home/getall", {
        page: this.page,
        limit: this.limit,
        smcate_id: smcate_id,
      })
        .then((res) => {
          this.caselist = res.data.case.list;
          this.total = res.data.case.total;
          this.allpage = Math.ceil(this.total / this.limit);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    domore(val) {
      let smcate_id = val;
      // console.log(smcate_id);
      //查看当前有几页
      let pa = Math.ceil(this.total / this.limit);
      if (this.page >= pa) {
        this.page = pa;
      } else {
        this.page++;
      }
      if (this.page <= pa) {
        get("/api/home/getall", {
          page: this.page,
          limit: this.limit,
          smcate_id: smcate_id,
        })
          .then((res) => {
            let tableDtata = res.data.case.list;
            tableDtata.forEach((item, index) => {
              this.caselist.push(item);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    toCasedetail(caseid) {
      this.$router.push({ path: "/casedetail", query: { case_id: caseid } });
    },
    //通过导航获取数据
    getcaseNav(smcate_id) {
      get("/api/home/getall", {
        page: this.page,
        limit: this.limit,
        smcate_id: smcate_id,
      })
        .then((res) => {
          this.caselist = res.data.case.list;
          this.total = res.data.case.total;
          this.allpage = Math.ceil(this.total / this.limit);
          this.case_nav = res.data.case.case_nav;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    let catid = this.$route.query.case_id;
    if (catid) {
      this.getcaseNav(catid);
      return;
    }
    get("/api/home/getall", { page: 1, limit: 6 })
      .then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.banner = res.data.banner;
          this.caselist = res.data.case.list;
          this.total = res.data.case.total;
          this.case_nav = res.data.case.case_nav;
          this.allpage = Math.ceil(this.total / this.limit);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  computed: {},
  watch: {},
};
</script>
<style  lang="less">
@import "../../less/index.less";
@import "../../assets/css/reset.css";
// .case_content {
//   margin-top: 50px;
//   margin-bottom: 60px;
// }
.case_content .el-tabs {
  margin-top: 50px;
  margin-bottom: 60px;
}
.case_content .el-tabs--card > .el-tabs__header {
  border: none;
}
.case_content .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
.c_list {
  width: 100%;
}
.case_content .el-tabs__item {
  text-align: center;
  // width: 148px;
  height: 20px;
  line-height: 20px;
}
.case_content .el-tabs__item:hover {
  // width: 90px;
  height: 20px;
  line-height: 20px;
  color: #3a6cfe;
}
.case_content .el-tabs__item.is-active {
  color: #3a6cfe;
}

.c_list ul {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
}
.c_list ul li {
  width: 30%;
  height: 500px;
  border: 1px solid #f5f5f5;
  margin-top: 40px;
  margin-right: 3%;
}
.cc_detail {
  width: 100%;
}
.cc_detailpic {
  width: 100%;
  height: 350px;
}
.cc_detailpic img {
  width: 100%;
  height: 100%;
}

.cc_detailtitle {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.cc_detailtitle h3 {
  font-size: 18px;
  font-weight: blod;
}
.cc_detailtitle p {
  font-size: 14px;
  color: #555555;
}
.yf-icon-lianjie {
  font-size: 24px;
  color: #787878;
}
.cc_detailto {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #fff;
}
.cc_detailto span {
  font-size: 14px;
  color: #929292;
}

.lod {
  width: 200px;
  height: 50px;
  border: 1px solid #d4d4d4;
  font: 16px/50px "微软雅黑";
  line-height: 50px;
  color: #747474;
  text-align: center;
  margin: 0 auto;
  margin-top: 60px;
  cursor: pointer;
  margin-bottom: 60px;
}
.lod:hover {
  color: #fff;
  cursor: pointer;
  background-color: #3a6cfe;
}
.case_content .cc_detail:hover {
  cursor: pointer;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*添加动画*/
.case_content,
.tips_title {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
}
.tips_title {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInLeft2;
}
/* 响应式布局 */

@media screen and (min-width: 992px) {
}

@media screen and (max-width: 992px) {
  .c_list ul .case_card {
    width: 45%;
  }
}

@media screen and (max-width: 768px) {
  .c_list ul .case_card {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .tips {
    height: 300px;
  }
  .tips .tips_title h1 {
    font-size: 34px;
  }
  .tips .tips_title h2 {
    font-size: 32px;
  }
  .c_list ul li {
    height: 420px;
  }
  .cc_detailpic {
    height: 300px;
  }
  .cc_detailtitle {
    height: 60px;
  }
  .cc_detailto {
    height: 50px;
  }
}
</style>